<template>
	<view class="container"
		:style="{'backgroundColor': currentColor.hex || '#fff', 'paddingTop': statusbar + 'px', 'height': windowHeight- 2 * statusbar + 'px'}">
		<scroll-view class="color-nav" scroll-y :show-scrollbar="false" v-if="currentColorSet.colors.length > 0">
			<view class="colors">
				<view v-for="(item,index) in currentColorSet.colors" :key="item.id" class="color-nav-item" :style="{'color': oppositeColor,
					'backgroundColor': `rgba(${item.RGB[0]},${item.RGB[1]},${item.RGB[2]}, 0.3)`,
					'borderTopColor': item.hex,
					'opacity':item.id === currentColor.id ? 1 : 0.8,
					'boxShadow': item.id === currentColor.id ? 'rgba(0, 0, 0, 0.6) 0 0 4rpx' : 'none'}"
					@click="handleColorChange(item)">
					<view class="line1">
						<view class="name">
							<text class="seq">{{index + 1}}</text>
							<text class="txt">{{item.name}}</text>
						</view>
					</view>
					<view class="line2">
						<text class="hex">{{item.hex}}</text>
						<view class="rgb">
							<view class="line r"
								:style="{'backgroundImage': `linear-gradient(${oppositeColor} 0%, ${oppositeColor} ${item.RGB[0]/255*100}%, rgba(255, 255, 255, 0.3) ${item.RGB[0]/255*100}%, rgba(255, 255, 255, 0.3) 100%)`}">
							</view>
							<view class="line g"
								:style="{'backgroundImage': `linear-gradient(${oppositeColor} 0%, ${oppositeColor} ${item.RGB[1]/255*100}%, rgba(255, 255, 255, 0.3) ${item.RGB[1]/255*100}%, rgba(255, 255, 255, 0.3) 100%)`}">
							</view>
							<view class="line b"
								:style="{'backgroundImage': `linear-gradient(${oppositeColor} 0%, ${oppositeColor} ${item.RGB[2]/255*100}%, rgba(255, 255, 255, 0.3) ${item.RGB[2]/255*100}%, rgba(255, 255, 255, 0.3) 100%)`}">
							</view>
						</view>
						<text class="pinyin">{{item.pinyin}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="color-params">
			<view class="item cmyk c" data-id="C">{{currentColor.CMYK[0]}}</view>
			<view class="item cmyk m" data-id="M">{{currentColor.CMYK[1]}}</view>
			<view class="item cmyk y" data-id="Y">{{currentColor.CMYK[2]}}</view>
			<view class="item cmyk k" data-id="K">{{currentColor.CMYK[3]}}</view>
			<view class="item rgb r" data-id="R">{{currentColor.RGB[0]}}</view>
			<view class="item rgb g" data-id="G">{{currentColor.RGB[1]}}</view>
			<view class="item rgb b" data-id="B">{{currentColor.RGB[2]}}</view>
			<view class="item" data-id="hex" @click="handleCopyHex">
				<text class="hex">{{currentColor.hex}}</text>
			</view>
		</view>
		<view class="color-view" :style="{'color': oppositeColor}" v-if="currentColor.hex" @click="test">
			<text class="color-name">{{currentColor.name}}</text>
			<text class="color-pinyin">{{currentColor.pinyin}}</text>
			<view class="poetry"
				:style="{'background': `rgba(${currentColor.RGB[0]}, ${currentColor.RGB[1]}, ${currentColor.RGB[2]}, 0.5)`, 'color': oppositeColor}">
				<view class="line">{{poetry.content[0]}}</view>
				<view class="line">{{poetry.content[1]}}</view>
				<text class="poetry-title">{{poetry.author}} · {{poetry.title}}</text>
			</view>
			<image v-if="currentColor.figure" class="figure" :style="{'height': figureHeight}"
				:src="'https://colors.ichuantong.cn/figure/'+currentColor.figure" alt="figure" @load="handleFigureLoad">
			</image>
		</view>
		<view class="color-set" :class="expand ? 'expand' : ''">
			<view v-for="item in colorsList" :key="item.id"
				:class="currentColor.id[0] === item.id + '' ? 'color-set-item selected' : 'color-set-item'"
				:style="{'backgroundColor': item.hex}" @click="handleChangeColorSet(item)">
				{{item.name}}
			</view>
			<view class="btn" @click="handleExpand"></view>
		</view>
		 <!-- #ifdef MP-WEIXIN -->
		<view class="btns" :style="{'top': statusbar * 5 + 'rpx'}">
			<view style="display:flex;">
				<view class="icon share-icon" style="margin-right:20rpx" @click="share"></view>
				<view style="float:left" class="icon download-icon" @click="download"></view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="btns" :style="{'top': statusbar * 2 + 'rpx'}">
			<view class="icon share-icon" @click="share"></view>
			<view class="icon download-icon" @click="download"></view>
		</view>
		<!-- #endif -->
	</view>

</template>

<script>
	const COLORS = require('../../utils/data.js')
	const jinrishici = require('../../utils/jinrishici.js')
	const {
		getCorrectTextColor
	} = require('../../utils/util')
	export default {
		data() {
			return {
				colorsList: COLORS.map(item => {
					const {
						colors,
						...info
					} = item
					return info
				}), // 颜色分类列表
				currentColorSet: {}, // 左侧颜色列表
				currentColor: {}, // 当前颜色
				poetry: {
					content: ['榛子非关隔院砧', '何来万户捣衣声'],
					author: '曹雪芹',
					title: '红楼梦'
				}, // 诗词
				poetryJson: '', // 诗词
				statusbar: 0, // 状态栏高度
				figureHeight: 'auto',
				expand: false, // 颜色分类展开 状态
				windowHeight: 0 // 窗体高度
			}
		},
		onLoad() {
			this.fetchPoetry()
			this.initState()
			this.initStyle()
		},
		methods: {

			// 初始化 样式
			initStyle() {
				let systemInfo = uni.getSystemInfoSync()
				this.statusbar = systemInfo.statusBarHeight
				this.windowHeight = systemInfo.windowHeight
			},

			// 初始化 颜色数据
			initState() {
				const currentColorSet = COLORS[2]
				const currentColor = currentColorSet.colors[16]
				this.currentColorSet = currentColorSet
				this.currentColor = currentColor
				this.oppositeColor = getCorrectTextColor(currentColor.RGB)
			},

			// 点击颜色
			handleColorChange(event) {
				const id = event.id
				const currentColor = this.currentColorSet.colors.find(item => item.id === id)
				this.currentColor = currentColor
				this.oppositeColor = getCorrectTextColor(currentColor.RGB)
			},

			// 点击颜色分类
			handleChangeColorSet(event) {
				this.fetchPoetry()
				const id = event.id
				const currentColorSet = COLORS[id]
				const currentColor = currentColorSet.colors[0]
				this.currentColorSet = currentColorSet
				this.currentColor = currentColor
				this.oppositeColor = getCorrectTextColor(currentColor.RGB)
			},

			// 展开 颜色分类板
			handleExpand() {
				this.expand = !this.expand
			},

			// 诗词图片背景
			handleFigureLoad: function(event) {
				const {
					height,
					width
				} = event.detail
				this.figureHeight = `${162 * height / width}rpx`
			},

			// 分享
			share() {
				uni.navigateTo({
					url: `/pages/share/share?id=${this.currentColor.id}`,
					animationType: 'slide-in-bottom'
				})
			},

			// 下载
			download() {
				uni.navigateTo({
					url: `/pages/download/download?id=${this.currentColor.id}&poetry=${this.poetryJson || JSON.stringify(this.poetry)}`,
					animationType: 'slide-in-top'
				})
			},
			
			test(){
				uni.navigateTo({
						url:'/pages/test/test'
				})
			},

			// 复制
			handleCopyHex: function() {
				uni.setClipboardData({
					data: this.currentColor.hex,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '内容已复制',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '内容复制失败',
							icon: 'none'
						})
					},
				});
			},

			// 获取古诗数据
			fetchPoetry: function() {
				// #ifndef H5
				jinrishici.load(result => {
					let obj = {
						content: result.data.content,
						author: result.data.origin.author,
						title: result.data.origin.title
					};
					obj.content = obj.content
						.replace(/[，|。|！|？|、]/g, ' ')
						.trim()
						.split(' ');
					this.poetry = obj
					this.poetryJson = JSON.stringify(obj)
				})
				// #endif
			}
		}
	}
</script>

<style>
	.container {
		background-image: url(https://m.ifable.cn/images/bg.png), url();
		background-size: auto;
		background-repeat: repeat, repeat-x;
		background-position: 0 0;
		display: flex;
		overflow: hidden;
		margin: 0 auto;
		align-items: flex-start;
		padding-bottom: 56rpx;
		padding-left: 14rpx;
		padding-right: 14rpx;
	}

	.color-nav {
		box-sizing: border-box;
		height: 100%;
		width: 320rpx;
		margin-right: 42rpx;
	}

	.colors {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.color-nav-item {
		border-top: 11.2rpx solid;
		display: flex;
		flex-direction: row;
		writing-mode: vertical-lr;
		padding: 14rpx 5.6rpx 11.2rpx;
		margin: 11.2rpx;
		border-bottom-right-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
		transition: all 0.5s ease 0s;
		align-self: flex-start;
	}

	.color-nav-item .line1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 16.8rpx;
		min-height: 179.2rpx;
	}

	/*.color-nav-item .line1 .cmyk {*/
	/*    display: flex;*/
	/*    justify-content: space-between;*/
	/*}*/

	.color-nav-item .line1 .name {
		writing-mode: vertical-lr;
		align-self: flex-end;
		font-size: 22.4rpx;
		margin-left: 5.6rpx;
		font-weight: 800;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		width: 100%;
	}

	.color-nav-item .line1 .name .seq {
		opacity: 0.5;
	}

	.color-nav-item .line1 .name .txt {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.color-nav-item .line2 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-transform: uppercase;
		font-size: 16.8rpx;
		font-weight: bold;
	}

	.color-nav-item .line2 .rgb {
		display: flex;
		flex-direction: column;
	}

	.color-nav-item .line2 .rgb .line {
		width: 4rpx;
		height: 168rpx;
		margin: 0 2rpx;
	}

	.color-nav-item .line2 .hex {
		font-size: 16.8rpx;
		color: inherit;
	}

	.color-nav-item .line2 .pinyin {
		text-transform: capitalize;
		color: inherit;
	}

	.color-params {
		display: flex;
		flex-direction: column;
		width: 180rpx;
		margin-right: 14rpx;
		margin-top: 16.8rpx;
	}

	.color-params .item {
		border-top: 2rpx solid rgba(255, 255, 255, 0.6);
		padding: 22.4rpx 0 11.2rpx 5.6rpx;
		position: relative;
	}

	.color-params .item::before {
		content: attr(data-id);
		text-transform: uppercase;
		position: absolute;
		font-size: 20rpx;
		font-weight: 800;
		color: rgb(255, 255, 255);
		top: 11.2rpx;
		left: 0;
		text-shadow: black 0 0 10rpx;
	}

	.color-params .item.cmyk,
	.color-params .item.rgb {
		text-align: right;
		font-size: 28rpx;
	}

	.color-params .item.cmyk.c {
		color: rgba(0, 147, 211, 0.8);
	}

	.color-params .item.cmyk.m {
		color: rgba(204, 0, 107, 0.8);
	}

	.color-params .item.cmyk.y {
		color: rgba(255, 241, 12, 0.8);
	}

	.color-params .item.cmyk.k {
		color: rgba(51, 51, 51, 0.8);
	}

	.color-params .item.rgb.r {
		color: rgba(255, 0, 0, 0.8);
	}

	.color-params .item.rgb.g {
		color: rgba(0, 255, 0, 0.8);
	}

	.color-params .item.rgb.b {
		color: rgba(0, 0, 255, 0.8);
	}

	.color-params .item .hex {
		display: block;
		margin-top: 16.8rpx;
		padding: 8.4rpx;
		font-size: 28rpx;
		text-align: center;
		text-transform: uppercase;
		color: rgb(255, 255, 255);
		background: rgba(51, 51, 51, 0.5);
		border-radius: 5.6rpx;
	}

	.color-view {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.5) 0 0 16rpx;
		position: relative;
		width: 162rpx;
		min-height: 504rpx;
		border-radius: 12rpx;
		padding: 28rpx 22.4rpx;
		margin: 156rpx 14rpx 16rpx 16rpx;
	}

	.color-name {
		font-size: 100rpx;
		font-family: TChinese, serif;
		letter-spacing: -14rpx;
		writing-mode: vertical-lr;
	}

	.color-pinyin {
		text-transform: capitalize;
		font-size: 19.6rpx;
		writing-mode: vertical-lr;
		position: absolute;
		right: 9.8rpx;
		top: 19.6rpx;
		color: inherit;
	}

	.poetry {
		box-sizing: border-box;
		font-size: 28rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		line-height: 1.2;
		padding: 16.8rpx 11.2rpx;
		margin: 28rpx 0 56rpx;
		z-index: 1;
	}

	.poetry .line {
		color: inherit;
		text-align: right;
		width: 33.6rpx;
		letter-spacing: 4rpx;
		font-weight: bold;
	}

	.poetry-title {
		color: inherit;
		font-size: 16.8rpx;
		width: 19.6rpx;
		align-self: flex-end;
		margin-right: 14rpx;
	}

	.color-view image {
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
	}

	.color-set {
		position: fixed;
		bottom: 56rpx;
		right: 84rpx;
		display: flex;
		padding: 0 28rpx;
		z-index: 999;
	}

	.color-set.expand .color-set-item {
		margin-right: -9.52rpx;
	}

	.color-set-item {
		transition: all 0.6s ease 0s;
		box-shadow: black 0 0 22.4rpx;
		width: 72.8rpx;
		height: 72.8rpx;
		margin-right: -50.4rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22.4rpx;
		font-weight: 800;
		color: #FFFFEB;
	}

	.color-set-item.selected {
		transform: translateY(-44.8rpx);
	}

	.btn {
		cursor: pointer;
		position: absolute;
		right: -44.8rpx;
		top: 50%;
		transform: translateY(-50%);
		background-image: url('https://colors.ichuantong.cn/static/assets/yinyang.b2e8af02.svg');
		background-size: cover;
		width: 84rpx;
		height: 84rpx;
		border: 1px solid rgb(0, 0, 0);
		border-radius: 50%;
		transition: all 0.6s ease 0s;
		box-shadow: black 1px -1px 6px;
	}

	.color-set.expand .btn {
		transform: translateY(-50%) rotateZ(180deg);
	}

	.btns {
		position: fixed;
		right: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 28rpx;
		width: 44.8rpx;
		height: 44.8rpx;
		background-size: contain;
	}

	.share-icon {
		background-image: url("");
	}

	.download-icon {
		background-image: url("");
	}
</style>
